<template>
	<view class="page-content">
		<u-navbar leftIconColor="#fff" autoBack title="鉴宝" titleStyle="color:#fff" bgColor="transparent" fixed safeAreaInsetTop>
			<view class="navbar-right" slot="right">
				<u-icon size="25" class="order-icon" name="/static/images/treasure/treasure-order.png"></u-icon>
				<u-icon size="30" class="news-icon" @click="gonavigate('/pages/news/news')" name="/static/images/treasure/news-white.png"></u-icon>
			</view>
		</u-navbar>
		<view class="container">
			<view>
				<u--image width="100%" height="450" src="/static/images/treasure/treasure-bg.jpg"></u--image>
				<view class="image-text"></view>
			</view>
			<view class="treasure-detail">
				<view class="detail-top">
					<view class="top-left">
						<view class="top-welcome">尊贵的观石翡友，欢迎您~</view>
						<view class="top-id">我的观石ID：18994xdj</view>
					</view>
					<view class="top-right">
						<u-avatar size="55" src="/static/images/avatar/avatar-vipImg.jpg"></u-avatar>
					</view>
				</view>
				<view class="detail-center">
					<view class="center-title">鉴定流程</view>
					<view class="center-flow">
						<view class="flow-left">
							<u-icon size="25" name="/static/images/treasure/treasure-upload.png"></u-icon>
							<view class="left-text">上传商品细节</view>
						</view>
						<u-line dashed color="#666" length="15%" class="dashed-line"></u-line>
						<view class="flow-center">
							<u-icon size="25" name="/static/images/treasure/treasure-rocket.png"></u-icon>
							<view class="left-text">专业团队鉴定</view>
						</view>
						<u-line dashed color="#666" length="15%" class="dashed-line"></u-line>
						<view class="flow-right">
							<u-icon size="25" name="/static/images/treasure/treasure-check.png"></u-icon>
							<view class="left-text">查看鉴定结果</view>
						</view>
					</view>
				</view>
				<view class="detail-bottom">
					<u-icon name="scan" size="25" color="#fff"></u-icon>
					<text>立即拍图鉴定</text>
				</view>
			</view>
			<view class="tresure-discuss">
				<view class="discuss-top">
					<view class="left-title">讨论区</view>
					<u-icon size="20" color="#333" name="arrow-right"></u-icon>
				</view>
				<view class="discuss-content">
					<view class="content-item" v-for="(item,index) in discussList" :key="index">
						<view class="item-text">{{item.title}}</view>
						<view class="item-bottom">
							<view class="bottom-left_hot" v-if="item.isHot"><text class="hot-text">热门</text></view>
							<view class="bottom-left_new" v-else-if="item.isNew"><text class="new-text">最新</text></view>
							<view class="bottom-center">{{item.lookCount}}浏览</view>
							<view class="bottom-right">{{item.replyCount}}回复</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="white-space"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				discussList:[
					{
						title: '这个是什么种水？市场价大概多少钱？谢谢！',
						isHot: true,
						lookCount: '999+',
						replyCount: 108
					},
					{
						title: '#观石鉴宝最靠谱 请老师帮忙鉴定估价，谢谢',
						isNew: true,
						lookCount: 6,
						replyCount: 0
					}
				]
			}
		},
		methods:{
			// 跳转页面
			gonavigate(pageUrl) {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content{
		.navbar-right{
			display: flex;
			align-items: center;
			.order-icon{
				padding: 0 $uni-spacing-row-sm;
			}
			.news-icon{
				padding: 0 $uni-spacing-row-sm;
			}
		}
		.container{
			.treasure-detail{
				background-color: $gs-jpBg;
				border-radius: $gs-border-radius-lg;
				margin: -35px $uni-spacing-row-base $uni-spacing-col-base $uni-spacing-row-base;
				padding: $uni-spacing-col-sm $uni-spacing-row-base;
				position: relative;
				z-index: 999;
				.detail-top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: $uni-spacing-col-lg $uni-spacing-row-base;
					.top-left{
						.top-welcome{
							padding: $uni-spacing-col-sm 0;
							color: $gs-color-green;
						}
						.top-id{
							padding: $uni-spacing-col-sm 0;
							font-size: $uni-font-size-base;
						}
					}
					.top-right{
						padding-right: $uni-spacing-row-base;
					}
				}
				.detail-center{
					padding: $uni-spacing-col-lg $uni-spacing-row-sm;
					.center-title{
						padding: 0 $uni-spacing-row-sm;
					}
					.center-flow{
						display: flex;
						align-items: center;
						justify-content: space-around;
						padding: $uni-spacing-col-base 0;
						.dashed-line{
							position: relative;
							top: -6px;
						}
						.flow-left,.flow-center,.flow-right{
							display: flex;
							flex-direction: column;
							align-items: center;
							.left-text{
								padding: $uni-spacing-col-sm 0;
								font-size: $uni-font-size-sm;
							}
						}
						
					}
				}
				.detail-bottom{
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 15px;
					background-color: $gs-color-green;
					color: $uni-text-color-inverse;
					padding: $uni-spacing-col-lg $uni-spacing-row-lg;
					margin: 0 auto $uni-spacing-col-lg auto;
				}
			}
			.tresure-discuss{
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				margin: $uni-spacing-col-lg $uni-spacing-row-base;
				background-color: $gs-jpBg;
				border-radius: $gs-border-radius-lg;
				.discuss-top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left-title{
						font-size: $gs-font-base;
						color: $uni-text-color;
						font-weight: bold;
					}
				}
				.discuss-content{
					.content-item{
						.item-text{
							padding: $uni-spacing-row-base 0;
						}
						.item-bottom{
							display: flex;
							.bottom-left_hot{
								background-color: rgba($gs-color-hot,0.3);
								border-radius: 10px;
								.hot-text{
									color: $gs-color-red;
									font-weight: bold;
								}
							}
							.bottom-left_new{
								background-color: rgba($gs-color-green,0.3);
								border-radius: 10px;
								.new-text{
									color: $gs-color-green;
									font-weight: bold;
								}
							}
							.bottom-left_hot,.bottom-left_new,.bottom-center,.bottom-right{
								font-size: $uni-font-size-sm;
								padding: $uni-spacing-col-sm $uni-spacing-row-base;
							}
						}
					}
				}
			}
			
			.white-space{
				height: 1px;
			}
		}
	}
</style>